<template>
	<div>
		<el-dialog title="流程详情" :close-on-click-modal="false" v-model="visible" width="95%" @close="refreshEmit" >
			<el-container>
				<el-form :model="dataForm" :rules="dataRule" :validate-on-rule-change="false" ref="dataForm" label-width="100px">
                    <el-form-item v-for="(item,index) in startNodeInfo.formProperties" :key="index" :label="item.name" :prop="item.id">
                        <el-input v-if="item.type === 'string'" v-model="dataForm[item.id]" :placeholder="item.name" :disabled="true"></el-input>
                        <el-select v-if="item.type === 'enum'" v-model="dataForm[item.id]" filterable :placeholder="item.name" :disabled="true">
                            <el-option v-for="itemc in item.formValues" :key="itemc.id" :label="itemc.name" :value="itemc.id"></el-option>
                        </el-select>
                        <el-input v-if="item.type === 'long'" v-model="dataForm[item.id]" :placeholder="item.name" type="number" max="200" min="0" :disabled="true"></el-input>
                        <el-date-picker v-if="item.type === 'date'" v-model="dataForm[item.id]" :placeholder="item.name" type="date" :disabled="true"></el-date-picker>
                    </el-form-item>
                </el-form>
				<el-aside width="300px">
					<ApproveHisDetailFoot ref="processdetailfoot" :processId="processId"></ApproveHisDetailFoot>
				</el-aside> 
			</el-container>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { ref, toRefs, reactive, nextTick, defineComponent } from 'vue'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { workflowApi } from '/@/api/workflowapi'
import request from '/@/utils/request'
import { systemApi } from '/@/api/systemapi'
import ApproveHisDetailFoot from "./approveHisDetailFoot.vue" //流程处理记录
export default defineComponent ({
	props: {
		taskId: {
			type: String,
			required: true
		},
		processId: {
			type: String,
			required: true
		},
		busNo: {
			type: String,
			required: true
		},
		designerId: {
			type: String,
			required: true
		},
		designerCode: {
			type: String,
			required: true
		}
	},
	components: {
		ApproveHisDetailFoot
	},
	setup(props, ctx) {
		const processdetailfootRef = ref()
		/**
		 * 内容宽度
		 */
		const contentWidth = {
		anchorPointWidth: '170px',
		recordWidth: '260px'
		}
		const state = reactive({
			visible: false,
			dataForm: null,
			startNodeInfo:{},
            dataRule: {
            },
            // taskId: '',
            rightWidth: contentWidth.recordWidth,
		})
		// 打开弹窗
		const openDialog = () => {
			state.visible = true
			workflowApi().getProcessInsLastNodeInfo(props.processId).then(data => {
                state.startNodeInfo = data
                let rulesForm = []
                data.formProperties.forEach((item, index, arr) => {
                    rulesForm[item.id]=item.value
                    if(true === item.required) {
                        state.dataRule[item.id] = [{ required: true, message: item.name + '不能为空', trigger: 'change' }]
                    }
                })
                state.dataForm = {...rulesForm}
            }).catch(() => {
                ElMessage.error('加载表单信息失败')
            })
		}
		const refreshEmit = () => {
			closeDialog()
			ctx.emit('refreshDataList')
		}
		// 关闭弹窗
		const closeDialog = () => {
			state.visible = false;
		}
		return{
			openDialog,
			closeDialog,
			refreshEmit,
			processdetailfootRef,
			...toRefs(state),
		}
	}
})
</script>

<style>

</style>